<template>
	<view>
		<f-navbar title="推广赚钱" fontColor="#ffffff" bgColor="#ffa200" :scrollTop="scrollTop" navbarType='0'></f-navbar>
		<view class="">
			<image src="../../static/promotion/banner.png" mode="widthFix" style="width: 100%;"></image>
			<view class="min-width">
				<view class="title">
					专享特权
				</view>
				<view class="">
					<view class="text">
						1、长期收益
					</view>
					<view class="text2">
						当您成为合伙人后，只要你的好友第一次进入平台是通过你分享的链接或二维码注册的，该好友就会自动成为你的长期性客户(温馨提示: 尽快加入抢夺空白市场别让你的好友先成为其他合伙人的客户)
					</view>

					<view class="text" style="margin-top: 30rpx;">
						2、推荐奖励
					</view>
					<view class="text2">
						从您分享的任意海报或推广链接进入便民平台的用户将永久成为您的粉丝及下级合伙人，他在任意城市站点付费发布、付费刷新、置顶信息，您都可以获得分成，同时您还能获得您下级合伙人的业绩奖励。
					</view>


					<view class="text" style="margin-top: 30rpx;">
						3、简单容易
					</view>
					<view class="text2">
						您的好友只要通过您分享的海报或者推广链接进入即可，无需强制关注或者注册。
					</view>
				</view>
				<view class="title">
					排行榜
				</view>
				<view class="">
					<view class="rank-content">
						<view class="rank-tips">
							<image class="rank-icon" src="../../static/renk-icon.png" mode="widthFix"></image>
							<swiper class="swiper_container" vertical="true" autoplay="true" circular="true"
								interval="2000">

								<block v-for="(item,index) in msgList">

									<swiper-item>
										<view class="swiper_item">
											<image class="docImg" :src="item.avatar" mode="widthFix"></image>
											<text
												style="overflow: hidden;
											z-index: 50;
											  text-overflow: ellipsis;
											  white-space: nowrap;display: inline-block;width: 80%;font-size: 20rpx;letter-spacing:2rpx;margin-left: 10rpx;">
												收入{{item.money}}元
											</text>
										</view>

									</swiper-item>
								</block>
							</swiper>
						</view>
						<view class="rank-other">
							<view class="other-item" v-for="(item,index) in msgList">
								<view class="o-num">
									{{index + 1}}
								</view>
								<image :src="item.avatar" mode="" class="o-img"></image>
								<view class="o-name">
									{{item.nickname}}
								</view>
								
								<view class="o-name">
									{{item.phone}}
								</view>
								<view class="o-price">
									{{item.money}}元
								</view>
							</view>
							<u-loadmore :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText"
								:nomore-text="nomoreText" />
						</view>
					</view>
				</view>

				<view class="title">
					常见问题
				</view>
				
				<view class="">
					<view class="text">
						1、转发阅读推广
					</view>
					<view class="text2">
						当您成为合伙人后，只要你的好友第一次进入平台是通过你分享的链接或二维码注册的，该好友就会自动成为你的长期性客户(温馨提示: 尽快加入抢夺空白市场别让你的好友先成为其他合伙人的客户)
					</view>
				
					<view class="text" style="margin-top: 30rpx;">
						2、如何加入
					</view>
					<view class="text2">
						从您分享的任意海报或推广链接进入便民平台的用户将永久成为您的粉丝及下级合伙人，他在任意城市站点付费发布、付费刷新、置顶信息，您都可以获得分成，同时您还能获得您下级合伙人的业绩奖励。
					</view>
				
				
					<view class="text" style="margin-top: 30rpx;">
						3、如何推广
					</view>
					<view class="text2">
						将您的专属海报或推广链接分享至好友、朋友圈或微信群，仅需每天动动手指就能自动赚钱
					</view>
					<view class="text" style="margin-top: 30rpx;">
						4、如何提现
					</view>
					<view class="text2">
						满5元即可提现，所有收益都由系统自动计算，收益3天后可以申请提现到您的微信钱包，24小时内到账
					</view>
					
					
					<view class="text" style="margin-top: 30rpx;">
						5、独家城市运营招募
					</view>
					<view class="text2">
						我们诚邀地方自媒体人、地方微信号运营者、加入我们共同发展(温馨提示: 尽快加入抢夺空白城市，每座城市只招募独家一位。) 微信: ky 00302 电话: 18886463319
					</view>
				</view>
				
				
				<view class="title">
					申请代理
				</view>
				
				<view class="">
			           <view class="row u-flex flexFS line" style="margin: 30rpx 0;">
			           	<view class="label text wd">
			           		姓名
			           	</view>
			           	<view class="  s-right">
			           		<input class="text2" type="text" name="" id="" align='right'  v-model="num" placeholder="请填写姓名"
			           			placeholder-style="color:#999;">
			           	</view>
			           </view> 
					   
					   <view class="row u-flex flexFS line"  style="margin: 30rpx 0;">
					   	<view class="label text wd">
					   		电话
					   	</view>
					   	<view class="  s-right">
					   		<input class="text2" type="text" name="" id="" align='right'  v-model="num" placeholder="请填写电话"
					   			placeholder-style="color:#999;">
					   	</view>
					   </view> 
					   
					   <view class="row u-flex flexFS line"  style="margin: 30rpx 0;">
					   	<view class="label text wd">
					   		入驻区域
					   	</view>
					   	<view class="  s-right">
					   		<input class="text2" type="text" name="" id="" align='right'  v-model="num" placeholder="请填写驻区域"
					   			placeholder-style="color:#999;">
					   	</view>
					   </view> 
					   
					   <view class="label text wd">
					   	申请原因
					   </view>
					   <view class="row u-flex line"  style="margin: 30rpx 0;">
					
					   	<view class="  s-right">
					   		<textarea class="textareaBox" placeholder="请填写申请原因"
					   			></textarea> 
					   	</view>
					   </view> 
					   
					   <view class="title" style="width: 350rpx;height: 70rpx;line-height: 70rpx;">
					   	申请代理，支付￥166
					   </view>
				</view>
				
			</view>
		</view>
		
		<view class="" style="height: 50rpx;">
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				msgList: [{
						avatar: "https://xstw.9e.gs/uploads/20230605/16a733e8ff8d081c2ea3f24bac22919b.jpg",
						money: '999',
						nickname: '张行',
						phone:17598898955
					},
					{
						avatar: "https://xstw.9e.gs/uploads/20230514/53bf4249d99ade4eeabc831572541b3a.jpg",
						money: '999',
						nickname: '李项',
						phone:17598898955
					},
					{
						avatar: "https://xstw.9e.gs/uploads/20230514/53bf4249d99ade4eeabc831572541b3a.jpg",
						money: '999',
						nickname: '王太',
						phone:17598898955
					}
				],
			}
		},
		methods: {

		}
	}
</script>

<style scoped lang="scss">
	.title {
		background-color: #ffaa00;
		color: #ffffff;
		text-align: center;
		line-height: 60rpx;
		width: 250rpx;
		margin: 30rpx auto;
		height: 60rpx;
		border-radius: 60rpx;

	}

	.text {
		font-size: 30rpx;
		font-weight: bold;
	}

	.text2 {
		font-size: 26rpx;
		color: #606060;
		margin-left: 30rpx;
		line-height: 40rpx;
	}

	.rank-icon {
		width: 200rpx;
		// height: 70rpx;
		// top: -36rpx;
		// position: absolute;
		// left: 50%;
		// -webkit-transform: translateX(-50%);
		// transform: translateX(-50%);
	}

	.swiper_container {
		height: 70rpx;
		background-color: #ffefe9;
		color: #f9672a;
		border-radius: 0 50rpx 50rpx 0;
		width: 500rpx;
		margin-top: 20rpx;
	}

	.rank-tips {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.rank-tips {
		display: flex;
		align-items: flex-end;
		position: relative;
		padding: 0 30rpx;
		// margin-top: 40rpx;

		&>image {
			width: 200rpx;
			height: 90rpx;
		}
	}

	.swiper_container {
		flex: 1;
		height: 70rpx;
		background-color: #ffefe9;
		color: #f9672a;
		border-radius: 0 50rpx 50rpx 0;
	}

	.swiper_item {
		height: 100%;
		width: 65%;
		font-size: 26rpx;
		white-space: nowrap;
		display: flex;
		flex-direction: row;
		padding-left: 15rpx;
		align-items: center;
		color: #f9672a;
		margin-left: 40rpx;
		position: relative;

		.docImg {
			width: 40rpx;
			height: 40rpx;
			border: 0;
			z-index: 50;
		}
	}

	.docImg {
		width: 40rpx;
		height: 40rpx;
		border: 0;
	}

	.rank-other {
		margin-top: 38rpx;
		// height: 700rpx;
		overflow: auto;

		.other-item {
			display: flex;
			align-items: center;
			height: 50rpx;
			line-height: 50rpx;
			margin: 0 20rpx;
			padding: 30rpx;

			.o-num {
				color: #999;
				font-size: 28rpx;
			}

			.o-img {
				width: 70rpx;
				margin: 0 20rpx 0 30rpx;
				flex-shrink: 0;
				height: 72rpx;
			}

			.o-name {
				flex-grow: 1;
				font-size: 28rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.o-price {
				color: #f23535;
				font-size: 28rpx;
				flex-shrink: 0;
			}

		}
	}
	
	
	.flex {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.line{
		border-bottom:1rpx solid #c5c5c5;
		padding-bottom:20rpx
	}
	
	.flexFS{
		display: flex;
		// justify-content: ;
		align-items: center;
	}
	
	.wd{
		width: 130rpx;
	}
	
	.textareaBox{
		height: 300rpx;
	}
</style>